<template>
  <div class="quickDialog">
    <el-row v-if="modalRow.value=='xmda' || modalRow.value=='gzbg' || modalRow.value=='roleck' || modalRow.value=='gjxgf' || modalRow.value=='dclwt' ||
    modalRow.value=='zgqd' || modalRow.value=='fzfx' ">
      <div class="row-box">
        <div class="form-title">{{modalRow.name}}</div>
        <xmda :selectRow="modalRow.row" v-if="modalRow.value=='xmda'"></xmda>
        <jdbg :status="modalRow.status" :selectRow="modalRow.row" v-if="modalRow.value=='gzbg'"></jdbg>
        <role-message status="read" :selectRow="modalRow.row" v-if="modalRow.value=='roleck'"></role-message>
        <xgfdj :status="modalRow.status" :selectRow="modalRow.row" v-if="modalRow.value=='gjxgf'"></xgfdj>
        <wtdj :status="modalRow.status" :selectRow="modalRow.row" v-if="modalRow.value=='dclwt'"></wtdj>
        <zgbg :status="modalRow.status" :selectRow="modalRow.row" v-if="modalRow.value=='zgqd'"></zgbg>
        <fxdj :status="modalRow.status" :selectRow="modalRow.row" v-if="modalRow.value=='fzfx'"></fxdj>
      </div>
    </el-row>
    <el-row v-else-if="modalRow.value=='fxdj'||modalRow.value=='wtxz'||modalRow.value=='rolexj'||modalRow.value=='wtdj'||modalRow.value=='xgfdj'">
      <div style="margin: 10px 20px">
        <el-button type="primary" @click="saveHide"><i class="el-icon-set-up" style="margin-right: 5px" ></i>保存并关闭</el-button>
        <el-button @click="saveAdd"><i class="el-icon-plus" style="margin-right: 5px"></i>保存并新建</el-button>
        <el-button @click="saveCtrl"><i class="el-icon-document-copy" style="margin-right: 5px"></i>保存并复制</el-button>
        <el-button @click="cancel"><i class="el-icon-close" style="margin-right: 5px"></i>取消</el-button>
      </div>
      <div class="row-box">
        <div class="form-card">
          <div class="form-title">{{modalRow.name}}</div>
          <wtxz v-if="modalRow.value=='wtxz'"></wtxz>
          <fxdj :status="modalRow.status" :selectRow="modalRow.row" v-if="modalRow.value=='fxdj'"></fxdj>
          <role-message status="edit" :selectRow="modalRow.row" v-if="modalRow.value=='rolexj'"></role-message>
          <wtdj :status="modalRow.status" :selectRow="modalRow.row" v-if="modalRow.value=='wtdj'"></wtdj>
          <xgfdj :status="modalRow.status" :selectRow="modalRow.row" v-if="modalRow.value=='xgfdj'"></xgfdj>
        </div>
      </div>
    </el-row>
    <el-row v-else>
      <el-col :span="20">
        <div>
          <el-row class="row-box" style="margin-bottom: 8px;">
            <div>
              <el-button type="primary" @click="toSend"><i class="el-icon-position" style="margin-right: 5px" ></i>发送</el-button>
              <el-button @click="saveDueOut"><i class="el-icon-set-up" style="margin-right: 5px"></i>保存待发</el-button>
            </div>
            <div style="margin: 20px">
              <el-form ref="ruleForm" label-width="60px">
                <el-form-item label="标题：">
                  <el-input v-model="title"></el-input>
                </el-form-item>
                <el-form-item label="流程：">
                  <el-input v-model="flow">
                    <template slot="append">查看流程</template>
                  </el-input>
                </el-form-item>
              </el-form>
            </div>
            <div>
              <span @click="uploadAttachment">上传附件(0)(最大500M)</span>
              <el-divider direction="vertical"></el-divider>
              <span @click="associatedDocument">关联文档(0)</span>
              <el-divider direction="vertical"></el-divider>
            </div>
          </el-row>
          <el-row class="row-box" style="height: 721px;overflow: auto">
            <div class="form-card">
              <div class="form-title">{{modalRow.name}}</div>
              <yxsb v-if="modalRow.value=='yxsb'"></yxsb>
              <xmlx :selectRow="modalRow.row" v-if="modalRow.value=='xmlx'"></xmlx>
              <jhsp :selectRow="modalRow.row" v-if="modalRow.value=='jhsp'"></jhsp>
              <xmys :selectRow="modalRow.row" v-if="modalRow.value=='xmys'"></xmys>
              <zgbg :status="modalRow.status" :selectRow="modalRow.row" v-if="modalRow.value=='zgbg'"></zgbg>
              <xmjx :selectRow="modalRow.row" v-if="modalRow.value=='xmjx'"></xmjx>
              <jdbg :status="modalRow.status" :selectRow="modalRow.row" v-if="modalRow.value=='jdbg'"></jdbg>
              <sqsq :selectRow="modalRow.row" v-if="modalRow.value=='sqsq'"></sqsq>
              <fysq :selectRow="modalRow.row" v-if="modalRow.value=='fysq'"></fysq>
            </div>
          </el-row>
        </div>
        <div style="padding: 15px 10px 15px 20px">
          <el-input
            type="textarea"
            maxlength="2000"
            placeholder="请输入附言（2000字以内）"
            v-model="textarea">
          </el-input>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="row-box" style="margin-left: 8px;height: 1035px;">
          <div class="form-small-font">
            <i class="el-icon-document-copy" style="color: rgb(66, 185, 131);margin-right: 8px"></i>相关数据
          </div>
          <div class="right-small-title">
            <span style="color: rgb(66, 185, 131);margin: 0 5px;">|</span>
            <span>我发起的数据（当前模板）</span>
          </div>
          <div style="overflow: auto">
            <ul>
              <li v-for="(item,index) in rightList" :key="index">{{modalRow.name}}{{item.label}}</li>
            </ul>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import Yxsb from "@/views/leader/components/yxsb";
import Xmlx from "@/views/leader/components/xmlx";
import Jhsp from "@/views/leader/components/jhsp";
import Xmys from "@/views/leader/components/xmys";
import Zgbg from "@/views/leader/components/zgbg";
import Xmjx from "@/views/leader/components/xmjx";
import Wtxz from "@/views/leader/components/wtxz";
import Fxdj from "@/views/leader/components/fxdj";
import Jdbg from "@/views/leader/components/jdbg";
import Sqsq from "@/views/leader/components/sqsq";
import Xmda from "@/views/leader/components/xmda";
import RoleMessage from "@/views/integrated/components/roleMessage";
import Fysq from "@/views/member/components/fysq";
import Wtdj from "@/views/member/components/wtdj";
import Xgfdj from "@/views/member/components/xgfdj";
export default {
  name: "quickDialog",
  components: {Xgfdj, Wtdj, Fysq, RoleMessage, Xmda, Sqsq, Jdbg, Fxdj, Wtxz, Xmjx, Zgbg, Xmys, Jhsp, Xmlx, Yxsb},
  data(){
    return{
      title:"",
      flow:"",
      rightList:[
        {label: ' - 风光一体化防沙治沙 - 2022-07-03'},
        {label: ' - 风光一体化防沙治沙 - 2022-07-03'},
        {label: ' - 风光一体化防沙治沙 - 2022-07-03'},
        {label: ' - 风光一体化防沙治沙 - 2022-07-03'},
        {label: ' - 风光一体化防沙治沙 - 2022-07-03'},
      ],
      textarea:''
    }
  },
  props:{
    modalRow:{
      type: Object,
      default:()=>{}
    }
  },
  watch: {
    modalRow:{
      immediate: true,
      handler(val) {
        this.title = this.modalRow.name+ '-{项目名称}-{申报日期}'
        this.flow = '赵XX（协同）'
      }
    }
  },
  mounted() {
    this.title = this.modalRow.name+ '-{项目名称}-{申报日期}'
    this.flow = '赵XX（协同）'
  },
  methods:{
    //保存并关闭
    saveHide(){
      this.$modal.msg('保存');
    },
    //保存并新建
    saveAdd(){
      this.$modal.msg('保存并新建');
    },
    //保存并复制
    saveCtrl(){
      this.$modal.msg('保存并复制');
    },
    //取消
    cancel(){
      this.$modal.msg('取消');
    },
    //发送
    toSend(){
      this.$modal.msg('发送');
    },
    //保存待发
    saveDueOut(){
      this.$modal.msg('保存待发');
    },
    //上传附件
    uploadAttachment(){
      this.$modal.msg('上传附件');
    },
    //关联文档
    associatedDocument(){
      this.$modal.msg('关联文档');
    }
  }
}
</script>

<style scoped>
.quickDialog{
  background-color: #E4E7ED;
}
.row-box{
  box-sizing: border-box;
  border-radius: 4px;
  background-color: #fff;
  padding: 15px;
}
.form-card{
  margin-left: auto;
  margin-right: auto;
  width: 75%;
  margin-top: 20px;
}
.form-title{
  line-height: 50px;
  background: rgb(66, 185, 131);
  text-align: center;
  font-size: 28px;
  font-weight: 600;
  color: #fff;
}
.form-small-font{
  font-size: 19px;
  font-weight: 600;
  color: #303133;
}
.right-small-title{
  background-color: #EBEEF5;
  font-weight: 600;
  padding: 5px;
  margin: 10px 0;
}
ul{
  padding: 0 20px;
}
ul li{
  margin-bottom: 10px;
}
</style>
